<template>
  <div class="course-article">
    <!-- 文章预览 -->
    <div ref="courseArticleScrollRef" :class="['course-article__scroll', showAll && 'show-all']">
      <MdPreview :id="mdPreviewId" :modelValue="content" />
      <!-- 目录预览 -->
      <div v-show="!showAll" @click="showAll = true" class="show-all-button">
        <span>展示全部</span>
        <DownCircleOutlined />
      </div>
    </div>
    <div class="course-article__catalog">
      <MdCatalog :editorId="mdPreviewId" :scroll-element="courseArticleScrollRef" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { nextTick, ref, watch } from 'vue';
import { MdPreview, MdCatalog } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
import { DownCircleOutlined } from '@ant-design/icons-vue';

interface IProps {
  id?: number;
  content?: string;
}

const props = withDefaults(defineProps<IProps>(), {
  content: '',
  id: -1,
});

const courseArticleScrollRef = ref();
const mdPreviewId = ref<string>(`course_article_preview_${new Date().valueOf()}`);
const showAll = ref<boolean>(false);

const scrollToTop = () => {
  console.log('🚀 ~ scrollToTop ~ courseArticleScrollRef.value:', courseArticleScrollRef.value);
  courseArticleScrollRef.value?.scrollTo({ top: 0, left: 0 });
};

watch(
  () => props.content,
  () => {
    scrollToTop();
    nextTick(() => {
      showAll.value = false;
    });
  },
  {
    immediate: true,
  }
);
</script>

<style lang="less" scoped>
.course-article {
  height: 100%;
  display: flex;
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid #0205140f;

  &__scroll {
    padding: 0 16px;
    position: relative;
    height: 100%;
    flex: 1;
    overflow: hidden hidden;
    &.show-all {
      overflow: auto;
    }
  }

  &__catalog {
    width: 30%;
    overflow-y: auto;
    flex-shrink: 0;
    padding: 16px 16px 0 0;
  }
}

.show-all-button {
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 -5px 20px 15px #ffffff;
  position: absolute;
  left: 0;
  bottom: 0;
  color: #1677ff;
  cursor: pointer;

  span {
    line-height: 22px;
  }
}
</style>
